<template>
	<view>
		<!-- 银行卡列表 -->
		<view class="bank-card-list">
			<view class="bank-card-item" v-for="(card, index) in bankCardList" :key="index">
				<view class="logo">
					<image src="/photo/bank-list/jainBank.png" style="width: 50rpx; height: 50rpx;"></image>
				</view>
				<view class="bank-msg">
					<!-- 银行名称 -->
					<view class="bank-name">{{ card.ext3 }}</view>
					<!-- 银行卡类型 -->
					<view class="bank-type">{{ card.ext1 }}</view>
					<!-- 银行卡号 -->
					<view class="card-number">{{ formatBankCardNumber(card.cardnumber) }}</view>
				</view>
				<view class="more">
					<image @click="toggleDropdown(index)" src="/photo/bank-list/more.png"
						style="width: 50rpx; height: 50rpx; color: white;"></image>
					<!-- 下拉框，通过 v-show 控制显示隐藏 -->
					<view v-show="dropdownVisible[index]" class="dropdown">
						<view class="dropdown-item" @click="showUnbindPrompt(index)">解绑银行卡</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加银行卡按钮 -->
		<button class="add-button" @click="goToAddCardPage">添加银行卡</button>
		<!-- 遮罩层，在提示框显示时覆盖页面 -->
		<view v-show="unbindPromptVisible" class="mask"></view>
		<!-- 解绑提示框，通过 v-show 控制显示隐藏 -->
		<view v-show="unbindPromptVisible" class="unbind-prompt">
			<view class="prompt-title">解绑提示</view>
			<view class="prompt-content">解绑后，将影响运费结算</view>
			<view class="prompt-buttons">
				<view class="cancel-button" @click="hideUnbindPrompt">取消</view>
				<view class="confirm-button" @click="unbindBankCard(selectedCardId)">继续解绑</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	//引入存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入拦截器
	import '@/config/requst.js'
	import {
		http
	} from '@/config/requst.js';

	const u = userStore();

	// 已添加的银行卡列表
	const bankCardList = ref([{
		id: '',
		ext1: '',
		ext3: '',
		cardnumber: '',
		bid:''
	}]);

	// 用于控制每个银行卡对应的下拉框是否显示
	const dropdownVisible = ref(new Array(bankCardList.value.length).fill(false));
	// 用于控制解绑提示框是否显示
	const unbindPromptVisible = ref(false);
	// 用于存储当前选中要解绑的银行卡 id
	const selectedCardId = ref(null);

	// 格式化银行卡号的方法
	const formatBankCardNumber = (cardnumber) => {
		if (cardnumber.length <= 4) {
			return cardnumber;
		}
		const lastFourDigits = cardnumber.slice(-4);
		const maskedPart = '●'.repeat(cardnumber.length - 4);
		const formattedNumber = maskedPart + lastFourDigits;
		let result = '';
		for (let i = 0; i < formattedNumber.length; i++) {
			if (i > 0 && i % 4 === 0) {
				result += ' ';
			}
			result += formattedNumber[i];
		}
		return result;
	};

	// 切换下拉框显示隐藏的方法
	const toggleDropdown = (index) => {
		console.log(index)
		dropdownVisible.value[index] = !dropdownVisible.value[index];
		console.log(dropdownVisible.value[index])
	};

	// 显示解绑提示框的方法，添加隐藏下拉框逻辑
	const showUnbindPrompt = (index) => {
		selectedCardId.value = bankCardList.value[index].bid;
		unbindPromptVisible.value = true;
		dropdownVisible.value[index] = false; // 隐藏对应银行卡的下拉框
	};

	// 隐藏解绑提示框的方法
	const hideUnbindPrompt = () => {
		unbindPromptVisible.value = false;
	};

	// 模拟解绑银行卡操作，添加实际网络请求逻辑
	const unbindBankCard = async (bid) => {
		console.log('模拟携带银行卡 ID', bid, '到后端进行解绑操作');
		try {
			const res = await http({
				url: "/card/deleteCard/" + bid
			});
			if (res.code === 20021) {
				uni.showToast({
					title: '解绑成功',
					duration: 2000
				});
				// 解绑成功后，重新查询银行卡列表
				select();
			} else {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'error'
				});
			}
		} catch (error) {
			console.error('解绑失败:', error);
			uni.showToast({
				title: '解绑失败，请稍后重试',
				duration: 2000,
				icon: 'error'
			});
		}
		hideUnbindPrompt();
	};

	//事件  点击添加银行卡后  跳转至添加银行卡页面
	const goToAddCardPage = () => {
		uni.navigateTo({
			url: '/pages/AddBankCard/AddBankCard'
		})
	}

	//定义查询函数
	const select = async () => {
		//发送登录请求
		const res = await http({
			url: "/card/selectCard/" + u.user.id
		})
		if (res.code == 20041) {
			uni.showToast({
				title: '查询成功',
				duration: 2000,
			});
			console.log(res);
			bankCardList.value = res.shuju;
			// 获取到数据后，重新初始化dropdownVisible数组，长度与bankCardList一致
			dropdownVisible.value = new Array(bankCardList.value.length).fill(false);
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error'
			});
		}
	}

	onShow(() => {
		console.log('页面显示了');
		select();
		// 监听页面显示事件，每次显示页面时重置解绑提示框的显示状态
		unbindPromptVisible.value = false;
	})

	onMounted(() => {
		select()
	})
</script>

<style lang="scss" scoped>
	/* 银行卡列表样式 */
	.bank-card-list {
		padding: 30rpx;
	}

	/* 银行卡列表项样式 */
	.bank-card-item {
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #588ac0;
		display: flex;

		//logo样式
		.logo {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			border-radius: 50%;
			margin-top: 20rpx;
		}

		.more {
			margin-top: -20rpx;
		}
	}

	/* 下拉框样式 */
	.dropdown {
		position: absolute;
		right: 0;
		width: 200rpx;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* 下拉框选项样式 */
	.dropdown-item {
		padding: 10rpx 20rpx;
		color: black;
		cursor: pointer;
	}

	/* 银行卡号样式 */
	.card-number {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		color: white;
		margin-left: 15rpx;
	}

	/* 银行名称样式 */
	.bank-name {
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 10rpx;
		margin-left: 15rpx;
		width: 500rpx;
	}

	/* 银行卡类型样式 */
	.bank-type {
		font-size: 24rpx;
		color: #fff;
		margin-bottom: 15rpx;
		margin-left: 15rpx;
	}

	/* 遮罩层样式 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	/* 解绑提示框样式 */
	.unbind-prompt {
		width: 350rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		text-align: center;
		z-index: 1000;
	}

	/* 提示框标题样式 */
	.prompt-title {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	/* 提示框内容样式 */
	.prompt-content {
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}

	/* 提示框按钮容器样式 */
	.prompt-buttons {
		display: flex;
		justify-content: space-around;
	}

	/* 取消按钮样式 */
	.cancel-button {
		color: blue;
		font-size: 24rpx;
		cursor: pointer;
	}

	/* 确认按钮样式 */
	.confirm-button {
		color: blue;
		font-size: 24rpx;
		cursor: pointer;
	}

	/* 添加银行卡按钮样式 */
	.add-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx;
		width: 80%;
		margin: 20rpx auto;
		text-align: center;
		font-size: 28rpx;
		cursor: pointer;
	}
</style>